<script setup>
  import {useRouter} from 'vue-router'
  import CartCard from '@/components/cart/CartCard.vue'
  import useProductStore from '@/stores/productStore.js';


  const productStore = useProductStore()
  const router = useRouter()

  console.log(productStore.proudctList);


</script>

<template>
  <div class="cart_list">
      <div class="cart_list_header">我的全部购物车
        <span>{{productStore.proudctList.length}}</span>
      </div>
      <div class="cart_list_content">
          <div class="cart_list_content_item" v-for="item,index in productStore.proudctList" :key="index">
              <CartCard :carList="item"/>
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
      padding: .08rem .18rem;
      font-size: .16rem;
      color: $content-fontcolor;
      text-align: center;
      line-height: .24rem;
      background-color: $bgColor;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
  }

  &_content {
      margin-top: .58rem;
  }
}
</style>